<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/static/element-ui/css/element-ui@2.15.12.css">
    <style type="text/css">

        .dbInfo-url {
            width: 450px;
        }

    </style>
</head>
<body>
<div id="app" style="margin: 20px 20px;">
    <el-container class="app-container">
        <el-header style="border-bottom: 1px solid green">
            <el-form :inline="true" :rules="dbInfoRules" :model="dbInfo" ref="dbInfo" class="demo-form-inline">
                <el-form-item label="链接" prop="url">
                    <el-input v-model="dbInfo.url" placeholder="链接" size="medium" class="dbInfo-url"></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="dbInfo.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="dbInfo.password" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="checkJdbcConnection('dbInfo')" v-loading.fullscreen.lock="fullscreenLoading">测试连接</el-button>
                </el-form-item>
                <el-form-item>
                    <el-tag v-show="dbInfo.validState == 0">未测试</el-tag>
                    <el-tag v-show="dbInfo.validState == 1">测试通过</el-tag>
                    <el-tag v-show="dbInfo.validState == -1">测试不通过</el-tag>
                    <span v-show="dbInfo.validState == -1">{{dbInfo.validErrMessage}}</span>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-tree v-show="dbInfo.validState == 1"
                    :props="dbTables"
                    :load="loadNode"
                    @node-click="tableTreeClick"
                    lazy
                    show-checkbox>
            </el-tree>
        </el-main>
        <el-footer>Footer</el-footer>
    </el-container>
</div>
</body>
<script src="/static/element-ui/js/vue@2.7.14.js"></script>
<script src="/static/element-ui/js/element-ui@2.15.12.js"></script>
<script src="/static/js/jquery-3.4.1.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: function() {
            return {
                dbTables: {
                    label: 'tableName',
                    children: 'zones',
                    isLeaf: 'leaf'
                },
                fullscreenLoading: false,
                dbInfo: {
                    url: "jdbc:mysql://192.168.3.144:3306/gen_code?characterEncoding=utf8&useSSL=false",
                    username: "root",
                    password: "qq991264921",
                    validState: 0,
                    validErrMessage: ""
                },
                dbInfoRules: {
                    url: [
                        { required: true, message: '链接不能为空!', trigger: 'blur' }
                    ],
                    username: [
                        { required: true, message: '用户名不能为空!', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '密码不能为空!', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            checkJdbcConnection: function (formName) {
                app.$refs[formName].validate((valid) => {
                    if (!valid) {
                        console.log('error submit!!');
                        return false;
                    }

                    app.$data.fullscreenLoading = true;

                    $.ajax({
                        /*设置请求方式*/
                        type: "POST",
                        /*请求路径*/
                        url: "/db/validJdbcConnection",
                        /*请求携带的参数, 后台接受时使用了@RequestBody注解，需要Json字符串和指定contentType*/
                        data: JSON.stringify(app.$data.dbInfo),
                        contentType:"application/json;charset=utf-8",
                        /*是否异步*/
                        async: true,
                        /*返回的数据类型*/
                        dataType:"json",//返回数据类型
                        /*请求成功的回调函数*/
                        success: function(data){
                            app.$data.fullscreenLoading = false;
                            if (data.code !== 200) {
                                app.$data.dbInfo.validState = -1;
                                app.$data.dbInfo.validErrMessage = data.message;
                                return;
                            }
                            app.$data.dbInfo.validState = 1;
                        }
                    });
                });
            },
            loadNode: function (node, resolve) {
                console.log("loadNode:", node);
                // 初始加载的节点
                if (node.level === 0) {
                    return resolve([{ tableName: '点击加载数据库表'}]);
                }

                // 使节点的子节点为空
                if (node.level > 1) {
                    return resolve([]);
                }

                $.ajax({
                    /*设置请求方式*/
                    type: "POST",
                    /*请求路径*/
                    url: "/db/getTableInfo",
                    /*请求携带的参数, 后台接受时使用了@RequestBody注解，需要Json字符串和指定contentType*/
                    data: JSON.stringify(app.$data.dbInfo),
                    contentType:"application/json;charset=utf-8",
                    /*是否异步*/
                    async: true,
                    /*返回的数据类型*/
                    dataType:"json",//返回数据类型
                    /*请求成功的回调函数*/
                    success: function(data){
                        if (data.code !== 200) {
                            app.$message('获取表错误' + data.message);
                            return;
                        }

                        for (let i = 0; i < data.data.length; i++) {
                            // table没有子节点
                            data.data[i].leaf = true;
                        }

                        resolve(data.data);
                    }
                });
            },
            tableTreeClick: function (nodeObj, node, arr) {
                console.log("tableTreeClick", nodeObj, node, arr);
            }
        }
    })
</script>
</html>